<template>
  <div>
    <div class="tc-main mt-0">
      <div class="item">
        <img src="@/assets/houtai_2_03.png" alt="" class="image" />
        <div class="info">
          <p>
            <span>{{ formatTraffic(getUserInfo.traffic).traffic }}</span> {{ formatTraffic(getUserInfo.traffic).unit }}
          </p>
          <p>Remaining Traffic</p>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/houtai_2_05.png" alt="" class="image" />
        <div class="info">
          <p>
            <span>{{ formatTraffic(getUserInfo.total_traffic).traffic }}</span> {{ formatTraffic(getUserInfo.total_traffic).unit }}
          </p>
          <p>Cumulative Recharge Traffic</p>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/houtai_2_07.png" alt="" class="image" />
        <div class="info">
          <p>
            <span>{{ formatTraffic(getUserInfo.consume_traffic).traffic }}</span> {{ formatTraffic(getUserInfo.consume_traffic).unit }}
          </p>
          <p>Cumulative consume traffic</p>
        </div>
      </div>
    </div>
    <div class="mt-20">
      <el-table :data="result.trafficData" border stripe style="width: 100%" class="j-table mt-0">
        <el-table-column prop="create_day" label="countdownal date" />
        <el-table-column prop="total" label="Usage traffic">
          <template #default="scope">
            <span>{{ scope.row.total }}M</span>
          </template>
        </el-table-column>
        <el-table-column prop="upload_flow" label="Upload traffic">
          <template #default="scope">
            <span>{{ scope.row.upload_flow }}M</span>
          </template>
        </el-table-column>
        <el-table-column prop="download_flow" label="Download traffic">
          <template #default="scope">
            <span>{{ scope.row.download_flow }}M</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="j-pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="result.trafficPage"
          :pageSize="result.trafficLimit"
          :total="result.trafficTotal"
          @current-change="
            (val) => {
              onCurrentChange('traffic', val);
            }
          "
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useUserStore } from '@/store/modules/user';
  import { formatTraffic } from '@/utils/index';

  const route = useRoute();
  const router = useRouter();
  const userStore = useUserStore();

  const getUserInfo = computed(() => {
    let userInfo = userStore.getUserInfo || {};
    return userInfo;
  });

  const props = defineProps<{
    result: Object;
  }>();

  const emits = defineEmits<{
    (event: 'confirm'): void;
    (event: 'page-change'): void;
  }>();

  const onCurrentChange = (type, val) => {
    emits('page-change', type, val);
  };

  onMounted(() => {});
</script>

<style scoped lang="scss"></style>
